/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @copyright  Copyright (c) 2014 X.commerce, Inc. (http://www.magentocommerce.com)
 * @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */

/*
    Forms
-------------------------------------- */
.form {
}

/*
    Fieldset
-------------------------------------- */
.fieldset {
    margin: 20px 0;
    letter-spacing: -0.31em; /* webkit */
    word-spacing: -0.43em; /* IE < 8 && gecko */
}

.fieldset > * {
    letter-spacing: normal;
    word-spacing: normal;
}

/*
    Legend
-------------------------------------- */
.legend {
}

/*
    Label
-------------------------------------- */
.label {
    margin: 0;
    vertical-align: middle;
}

/*
    Control
-------------------------------------- */
.control input {
    vertical-align: middle;
    margin: 0;
}

.control select,
.control textarea {
    margin: 0;
}

/*
    Field
-------------------------------------- */
.field {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 0 12px 0;
}

.field > .label {
    margin: 0 0 6px 6px;
}

.field > .control {
}

/* TODO: remove after all templates refactoring */
span.required {
    display: none;
}

.field.required > .label:after {
    content: '*';
    color: red;
    margin-left: 3px;
}

.field.alternative {
}

/*
    Radios and Checkboxes
-------------------------------------- */
/* TODO: rename 'choice' class */
.choice .control {
    display: inline-block;
    vertical-align: top;
}

.choice > .label span:after {
    content: '';
    margin: 0;
}

.choice > .control {
    width: auto;
}

/* TODO: rename or remove 'extra' class */
.extra {
    margin: 5px 0 0;
}

/*
    Control with added before and after content
-------------------------------------- */
.with-addon {
}

.addon {
    padding: 0;
    display: table;
    width: 100%;
}

.addon textarea,
.addon select,
.addon input {
    width: 100%;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}

.addon select {
    width: auto;
}

.addon select + .addafter {
    border: none;
}

.ie .addon textarea,
.ie .addon select {
    display:inline-block;
}

.addon textarea:first-child,
.addon select:first-child,
.addon input:first-child,
.addon .addbefore:first-child {
    border-radius: 2px 0 0 2px;
}

.addon textarea:last-child,
.addon select:last-child,
.addon input:last-child,
.addon .addafter:last-child {
    border-radius: 0 2px 2px 0;
}

.addon .addbefore,
.addon .addafter {
    background: #f5f5f5;
    background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
    background-repeat: repeat-x;
    vertical-align: middle;
    width: 1px;
    color: #666;
    font-size: 11px;
    font-weight: bold;
    height: 0;
    white-space: nowrap;
    display: inline-block;
    display: table-cell;
    padding: 4px;
    border: solid #ccc;
    border-width: 1px 0 1px 1px;
}

/*.addon {direction: rtl; }
.addon > * {direction: ltr; }*/

.addon *:focus ~ .addafter {

}

.addon .addafter {
    border-width: 1px 1px 1px 0;
}

.choice .addafter,
.choice .addbefore {
    display: inline;
}

/* Addon left aligned */
.field-price .addon {
    direction: rtl;
}

.field-price .addon > * {
    direction: ltr;
}

.field-price .addon .addafter {
    border-width: 1px 0 1px 1px;
    border-radius: 4px 0 0 4px;
}

.field-price .addon textarea:first-child,
.field-price .addon select:first-child,
.field-price .addon input:first-child {
    border-radius: 0 4px 4px 0;
}

/*
    Field with note
-------------------------------------- */
.with-note {
}

.with-note .note,
.field .note,
.data-table .note {
    font-size: 11px;
    padding-left: 15px;
    margin: 5px 0;
    color: #666;
}

.with-note .note:before,
.field .note:before,
.data-table .note:before {
    position: absolute;
    margin: 4px 0 0 -14px;
    content: '';
    display: inline-block;
    vertical-align: top;
    font-size: 0;
    line-height: 0;
    width: 0;
    border-bottom: 5px solid #666;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}

/*
    Form tooltip
-------------------------------------- */
.with-tooltip.choice {
    padding-right: 20px;
}

.with-tooltip.choice,
.with-tooltip > .control {
    position: relative;
    z-index: 1;
}

.with-tooltip.choice:hover,
.with-tooltip:hover > .control {
    z-index: 998;
}

.with-tooltip:not(.choice) .tooltip {
    position: absolute;
    left: 100%;
    top: 3px;
    vertical-align: middle;
    margin: 4px 0 0 3px;
}

.with-tooltip:not(.choice) .tooltip .help {
    width: 12px;
    overflow: hidden;
}

/*
    Form actions
-------------------------------------- */
.form-actions {
    padding: 10px;
    margin: 10px 0;
}

/*
    Default view for fields: Labels are above the controls
-------------------------------------- */
.form-inline .label,
.form-inline .control {
    margin: 0;
    float: left;
    width: 55%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.form-inline .label {
    width: 45%;
    text-align: right;
    padding: 5px 15px 0 0;
}

.form-inline .choice {
    position: relative;
    z-index: 1;
}

.form-inline .choice .control {
    position: absolute;
    margin-top: 4px;
    width: auto;
    left: 45%;
}

.form-inline .choice .tooltip {
    margin-left: 20px;
    position: relative;
    z-index: 1;
    margin-top: 7px;
}

.form-inline .with-tooltip:not(.choice) {
    padding-top: 20px;
}

.control .control-value {
    display: inline-block;
    padding: 6px 0 0;
    vertical-align: top;
}

.control .control-value.special {
    font-weight: bold;
}

/*
    Field with multiple fields
-------------------------------------- */
/* TODO: rename 'fields-group' class. Propose - 'group' */

[class^="fields-group-"] .field {
    vertical-align: top;
    margin: 0;
    display: inline-block;
}

[class^="fields-group-"] .field .label {
    width: auto;
    float: none;
    text-align: left;
    padding-right: 0;
}

[class^="fields-group-"] .choice .label {
    display: inline;
}

[class^="fields-group-"] .field .control {
    float: none;
    width: auto;
    margin-left: 0;
}

/*.fields-group-2 .field {
    width: 50% !important;
    display: inline-block;
}

.fields-group-3 .field {
    width: 33.3% !important;
    display: inline-block;
}

.fields-group-4 .field {
    width: 25% !important;
    display: inline-block;
}

.fields-group-5 .field {
    width: 20% !important;
    display: inline-block;
}*/

@media screen and (max-width: 960px) {
    [class^="fields-group-"] .field {
        width: 100% !important;
        margin-bottom: 20px !important;
    }
}

[class^="fields-group-"] {
    letter-spacing: -0.31em; /* webkit */
    word-spacing: -0.43em; /* IE < 8 && gecko */
}

[class^="fields-group-"] > * {
    letter-spacing: normal;
    word-spacing: normal;
}

/*
    Form field with nested controls inside
-------------------------------------- */
.complex {
}

.nested {
    padding: 6px 0 0;
}

.nested .choice .label,
.nested .choice .control {
    float: none;
    width: auto;
    position: static;
    left: auto;
    text-align: left;
    display: inline;
    padding: 0;
}

.control *:first-child {
    /*margin-top: 0;*/
}

.nested .field {
    width: auto;
    padding: 0;
    margin: 5px 0;
    display: block;
}

.nested .field:first-child {
    margin-top: 0;
}

.nested .field:last-child {
    margin-bottom: 0;
}

/*
    Cols
-------------------------------------- */
.form-cols  .fieldset {
    padding-right: 0;
}

.form-cols  .fieldset > .field {
    width: 50%;
    display: inline-block;
    vertical-align: top;
    padding-right: 20px;
}

.form-cols  .fieldset > .with-tooltip:not(.choice) .tooltip {
    right: 20px;
}

@media screen and (max-width: 960px) {
    .form-cols  .fieldset > .field {
        width: 100% !important;
        display: block;
    }
}

.buttons[note]:after {
    content: '* ' attr(note);
    display: block;
    clear: both;
    font-size: 11px;
    color: red;
    margin-top: 10px;
}

.qty .control,
.qty .label {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
}

.qty .input-text {
    width: 3em;
    margin: 0;
}

/*
    Clearfix
-------------------------------------- */
.buttons-set:before,
.buttons-set:after,
.form-inline .field:before,
.form-inline .field:after,
.form-actions:before,
.form-actions:after,
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.buttons-set:after,
.form-inline .field:after,
.form-actions:after,
.clearfix:after {
    clear: both;
}
